<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>9-1.轮播插件</title>

<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>

</head>

<body>
	
    <!--<div class="container">
    
   		&lt;!&ndash;轮播容器&ndash;&gt;
        <div id="myCarousel" class="carousel slide">        
        	&lt;!&ndash;轮播指针&ndash;&gt;
        	<ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
        	&lt;!&ndash;轮播项目&ndash;&gt;
            <div class="carousel-inner">
            	<div class="item active">
                	<img src="../img/slide1.png">
                </div>
                <div class="item">
                	<img src="../img/slide2.png">
                </div>
                <div class="item">
                	<img src="../img/slide3.png">
                </div>
            </div>
            &lt;!&ndash;轮播导航&ndash;&gt;
            <a href="#myCarousel" class="carousel-control left"  data-slide="prev">&lsaquo;</a>
            <a href="#myCarousel" class="carousel-control right" data-slide="next">&rsaquo;</a>
        </div>
    
    </div>-->

    <!-- 带标题的轮播 -->
    <!--<div class="container">

        &lt;!&ndash;轮播容器&ndash;&gt;
        <div id="myCarousel" class="carousel slide">
            &lt;!&ndash;轮播指针&ndash;&gt;
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            &lt;!&ndash;轮播项目&ndash;&gt;
            <div class="carousel-inner">
                <div class="item active">
                    <img src="../img/1.jpg">
                    <div class="carousel-caption"><h3>山山水水</h3></div>
                </div>
                <div class="item">
                    <img src="../img/1.jpg">
                    <div class="carousel-caption"><h3>海中的小船</h3></div>
                </div>
                <div class="item">
                    <img src="../img/1.jpg">
                    <div class="carousel-caption"><h3>美丽的海岸线</h3></div>
                </div>
            </div>
            &lt;!&ndash;轮播导航&ndash;&gt;
            <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
            <a href="#myCarousel" class="carousel-control right" data-slide="next">&rsaquo;</a>
        </div>

    </div>-->

    <!-- 程序控制 轮播 -->
    <script>
        $(document).ready(function(e) {
            //设置播放时间间隔
            $('#myCarousel').carousel({interval:2000});

            //开始自动播放
            $('#startBtn').click(function(e) {
                $('#myCarousel').carousel('cycle');
            });

            //暂停自动播放
            $('#pauseBtn').click(function(e) {
                $('#myCarousel').carousel('pause');
            });

            //上一张
            $('#prevBtn').click(function(e) {
                $('#myCarousel').carousel('prev');
            });

            //下一张
            $('#nextBtn').click(function(e) {
                $('#myCarousel').carousel('next');
            });

            //第1张
            $('#toOneBtn').click(function(e){
                $('#myCarousel').carousel(0);
            });

            //第2张
            $('#toTwoBtn').click(function(e){
                $('#myCarousel').carousel(1);
            });

            //第3张
            $('#toThreeBtn').click(function(e){
                $('#myCarousel').carousel(2);
            });

            //slide事件处理
            /*$('#myCarousel').on('slid.bs.carousel',function(e){
                alert('轮播被切换！');
            });*/
        });
    </script>

    <div class="container">

        <!--轮播容器-->
        <div id="myCarousel" class="carousel slide">
            <!--轮播指针-->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!--轮播项目-->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="../img/1.jpg">
                    <div class="carousel-caption"><h3>山山水水</h3></div>
                </div>
                <div class="item">
                    <img src="../img/1.jpg">
                    <div class="carousel-caption"><h3>海中的小船</h3></div>
                </div>
                <div class="item">
                    <img src="../img/1.jpg">
                    <div class="carousel-caption"><h3>美丽的海岸线</h3></div>
                </div>
            </div>
            <!--轮播导航-->
            <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
            <a href="#myCarousel" class="carousel-control right" data-slide="next">&rsaquo;</a>
            <!--控制按钮-->
            <div class="text-center">
                <button id="startBtn" type="button" class="btn">自动播放</button>
                <button id="pauseBtn" type="button" class="btn">暂停播放</button>
                <button id="prevBtn" type="button" class="btn">上一张</button>
                <button id="nextBtn" type="button" class="btn">下一张</button>
                <button id="toOneBtn" type="button" class="btn">第1张</button>
                <button id="toTwoBtn" type="button" class="btn">第2张</button>
                <button id="toThreeBtn" type="button" class="btn">第3张</button>
            </div>
        </div>

    </div>
</body>
</html>